import React, { useState, useEffect, useReducer } from 'react'
import { View, Text, TextInput, Button, StyleSheet, Image, TouchableOpacity, Alert } from 'react-native'
import { connect } from 'react-redux'

import axios from 'axios'//当页面有第二个get/post/put/delete方法时，直接使用axios调用

import stateToProps from '../store/stateToProps'//变量
import dispatchToProps from '../store/dispatchToProps'//方法
const messagelist = [
    { id: 1, title: '昵称', content: '小小夏' },
    { id: 2, title: '性别', content: '性别' },
    { id: 3, title: '生日', content: '1997-03-26' },
    { id: 4, title: '手机号', content: '13389829989' },
    { id: 5, title: '修改地址', content: '***' },
]
// 注销用户后直接跳转到首页
const createTwoButtonAlert = () =>
    Alert.alert(
        "注销用户",
        "您确定要注销用户吗？",
        [
            {
                text: "取消",
                onPress: () => console.log("Cancel Pressed"),
                style: "cancel"
            },
            { text: "确定", onPress: () => console.log("OK Pressed") }
        ]
    );
const Mine = (props) => {
    let { inputValue, inputChange, clickBtn, postFun, deleteFun, getFun, putFun,
        list, data, post, } = props
    /*这里是页面加载完成时调用，会调用get请求，拉取数据*/
    // useEffect(() => {
    //     getFun()
    // })
    return (
        <View style={{ flex: 1, backgroundColor: 'white' }}>
            <View style={styles.top}>
                <Text style={styles.back} onPress={() => { props.navigation.push('Mine') }}>Back</Text>
                <Text style={styles.title}>个人信息</Text>
                <Text style={styles.save}>√</Text>
            </View>
            {/* 头像 */}
            <Image
                style={styles.touxiang}
                source={{
                    uri: 'https://reactnative.dev/img/tiny_logo.png',
                }}
            />
            <Text style={styles.changeimg}>更改头像</Text>
            <View style={styles.list}>
                {
                    messagelist.map((item, idx) => (<TouchableOpacity key={idx} style={styles.lists}
                    onPress={ ()=>props.navigation.push('Change')}
                    >
                        <Text style={styles.class}>{item.title}</Text>
                        <Text style={styles.content}>{item.content}</Text>
                    </TouchableOpacity>))
                }
            </View>
            {/* 注销用户 */}
            <TouchableOpacity style={styles.del} onPress={createTwoButtonAlert}><Text style={styles.deluser}>注销用户</Text></TouchableOpacity>
        </View>
    )

}

const styles = StyleSheet.create({
    deluser: {
        color: 'white',
        fontSize: 20
    },
    del: {
        width: '30%',
        height: ptd(30),
        backgroundColor: '#FF5353',
        position: 'absolute',
        top: ptd(450),
        left: '35%',
        borderRadius: 20,
        justifyContent: 'center',
        alignItems: 'center'
    },
    content: {
        position: 'absolute',
        right: ptd(20),
        color: '#ccc'
    },
    class: {
        fontSize: 20,
        paddingLeft: ptd(20),
        fontWeight: '100'
    },
    lists: {
        borderWidth: 1,
        borderColor: "#ccc",
        width: '100%',
        height: 50,
        justifyContent: 'center'
    },
    list: {
        width: '100%',
        height: 300,
        position: 'absolute',
        top: ptd(160)
    },
    changeimg: {
        fontSize: 15,
        position: 'absolute',
        top: ptd(125),
        left: ptd(155),
        color: 'blue'
    },
    touxiang: {
        width: ptd(60),
        height: ptd(60),
        borderRadius: 50,
        position: 'absolute',
        top: ptd(60),
        left: ptd(150)
    },
    save: {
        fontSize: 25,
        position: 'absolute',
        right: ptd(15),
        top: ptd(5)
    },
    title: {
        fontSize: 20,
        position: 'absolute',
        top: ptd(7),
        left: ptd(150)
    },
    back: {
        paddingLeft: ptd(10),
        marginTop: ptd(10)
    },
    top: {
        position: 'absolute',
        width: '100%',
        height: 50,
        backgroundColor: '#F8F8F8',
        borderColor: '#F8F8F8',
        borderBottomColor: '#ccc',
        borderWidth: 2
    }
});
//每个自己写的组件（页面）都要用下面这一行
export default connect(stateToProps, dispatchToProps)(Mine);
